<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/beneoverlay.css">
        <script type="text/javascript" src="js/qwebchannel.js"></script>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/beneoverlay.js"></script>
        <script type="text/javascript" src="js/widgets/wind.js"></script>
        <script type="text/javascript">
         $(function () {
             connect(function (data_refs) {
                 setupWind(data_refs);
             });
         });
        </script>
    </head>
    <body>
        <div id="wind" class="tabs">
            <svg class="icon" viewBox="0 0 100 100">
                <ellipse cx="90" cy="30" rx="5" ry="10" class="secondary-fill" />
                <path d="m30,7 L90,20 L90,40 L30,53" class="secondary-fill" />
                <ellipse cx="30" cy="30" rx="10" ry="23" class="primary-fill" />
                <line x1="5" x2="30" y1="8" y2="10" stroke-width="3" class="secondary-stroke" />
                <line x1="5" x2="30" y1="52" y2="50" stroke-width="3" class="secondary-stroke" />
                <line x1="5" x2="5" y1="5" y2="95" stroke-width="5" class="primary-stroke" />
            </svg>
            <table>
                <tr id="dir-row">
                    <td class="secondary-font secondary-color">DIR:&nbsp;</td>
                    <td id="wind_dir" class="primary-font primary-color three-digit right">43</td>
                    <td class="primary-font primary-color">&#176;</td>
                </tr>
                <tr id="mag-row">
                    <td class="secondary-font secondary-color">MAG:&nbsp;</td>
                    <td id="wind_mag" class="primary-font primary-color three-digit right">8</td>
                    <td class="primary-font primary-color">kt</td>
                </tr>
            </table>
        </div>
    </body>
</html>
